<template>
	<view>
		<view class="header">
			<u-badge id="avatar-dot" :isDot="hasNews" bgColor="red"></u-badge>
			<u-avatar id="avatar" @click="clickAvatar" shape="circle" :src="avatar" size="96rpx">
			</u-avatar>
			<view id="realname">
				<text>你好，</text>
				<text>{{realname == '' ? '同学' : realname}}</text>
			</view>
			<view id="saying">
				<text>{{saying}}</text>
			</view>
		</view>
		<view class="info-board" v-if="examLoaded">
			<view id="exam-quick-join" v-if="examQuickJoin.exam">
				<text id="title">你有一场考试已经开始</text>
				<text id="join" @click="quickJoinExam">进入</text>
				<u-icon id="join-arrow" @click="quickJoinExam" name="arrow-right-double" color="#3d5cff"></u-icon>
				<u-count-down id="count-down" :time="examQuickJoin.leftTime" format="HH:mm:ss" @change="onTimeChange">
					<view id="time">
						<view id="time-slot">
							<text
								id="time-item">{{ examQuickJoin.timeData.hours>=10?examQuickJoin.timeData.hours:'0'+examQuickJoin.timeData.hours }}</text>
						</view>
						<text id="time-doc">:</text>
						<view id="time-slot">
							<text
								id="time-item">{{ examQuickJoin.timeData.minutes>=10?examQuickJoin.timeData.minutes:'0'+examQuickJoin.timeData.minutes }}</text>
						</view>
						<text id="time-doc">:</text>
						<view id="time-slot">
							<text
								id="time-item">{{ examQuickJoin.timeData.seconds>=10?examQuickJoin.timeData.seconds:'0'+examQuickJoin.timeData.seconds }}</text>
						</view>
					</view>
				</u-count-down>
			</view>
			<view id="exam-pre-start" v-else-if="examPreStart.exam">
				<text id="title">你有一场考试即将开始</text>
				<text id="join" @click="toExamListPage">进入</text>
				<u-icon id="join-arrow" @click="toExamListPage" name="arrow-right-double" color="#3d5cff"></u-icon>
				<text
					id="start-time">{{examPreStart.exam.startTime.substr(5, examPreStart.exam.startTime.length)}}</text>
				<u-icon id="icon" name="clock" size="48"></u-icon>
				<u-count-down id="count-down" :time="examPreStart.leftTime" format="HH:mm:ss" @change="onTimeChange">
					<view id="time">
						<view id="time-slot">
							<text
								id="time-item">{{ examPreStart.timeData.hours>10?examPreStart.timeData.hours:'0'+examPreStart.timeData.hours }}</text>
						</view>
						<text id="time-doc">:</text>
						<view id="time-slot">
							<text
								id="time-item">{{ examPreStart.timeData.minutes>=10?examPreStart.timeData.minutes:'0'+examPreStart.timeData.minutes }}</text>
						</view>
						<text id="time-doc">:</text>
						<view id="time-slot">
							<text
								id="time-item">{{ examPreStart.timeData.seconds>=10?examPreStart.timeData.seconds:'0'+examPreStart.timeData.seconds }}</text>
						</view>
					</view>
				</u-count-down>
			</view>
			<view id="exam-none" v-else>
				<u-icon id="icon" size="72" color="#ff6905" name="info-circle-fill"></u-icon>
				<text id="text">暂无考试</text>
			</view>
		</view>
		<view class="scroll-list">
			<scroll-view id="scroll-view" scroll-x="true" scroll-left="100%">
				<view id="scroll-item" v-for="(item, index) in scrollList" :key="index" :style="item.bgColor">
					<view id="item-content" @click="clickBlock(item)">
						<u-icon size="148" :name="item.icon"></u-icon>
						<text>{{item.text}}</text>
					</view>
				</view>
			</scroll-view>
		</view>
		<u-tabbar :value="tabIdx" @change="onTabPress" :border=false activeColor="#3d5cff" inactiveColor="#b8b8d2">
			<u-tabbar-item text="首页">
				<u-icon slot="active-icon" size="60" name="home" color="#3d5cff"></u-icon>
				<u-icon slot="inactive-icon" size="60" name="home" color="#b8b8d2"></u-icon>
			</u-tabbar-item>
			<u-tabbar-item text="考试">
				<u-icon slot="active-icon" size="60" name="bookmark" color="#3d5cff"></u-icon>
				<u-icon slot="inactive-icon" size="60" name="bookmark" color="#b8b8d2"></u-icon>
			</u-tabbar-item>
			<u-tabbar-item text="我的">
				<u-icon slot="active-icon" size="60" name="account" color="#3d5cff"></u-icon>
				<u-icon slot="inactive-icon" size="60" name="account" color="#b8b8d2"></u-icon>
			</u-tabbar-item>
		</u-tabbar>
	</view>
</template>

<script>
	var _this = null;
	const api = require('api.js');
	const message = require('message.js');
	export default {
		data() {
			return {
				tabIdx: 0,
				hasNews: false,
				realname: '同学',
				avatar: '',
				saying: '',
				sayings: [
					"读书是学习，使用也是学习，而且是更重要的学习。",
					"学习必须与实干相结合。",
					"学而时习之，不亦说乎？",
					"鸟欲高飞先振翅，人求上进先读书。",
					"求学的三个条件是：多观察、多吃苦、多研究。",
					"与肝胆人共事，无字句处读书。",
					"科学的自负比起无知的自负来还只能算是谦虚。",
					"读书百遍，其义自见。",
					"读书志在圣贤，为官心存君国。",
					"书到用时方恨少，事非经过不知难。",
					"学习从来无捷径，循序渐进登高峰。",
					"活着就要学习，学习不是为了活着。",
				],
				examLoaded: false,
				examPreStart: {
					leftTime: 30 * 60 * 1000,
					timeData: {
						hours: 0,
						minutes: 0,
						seconds: 0
					},
					exam: null
				},
				examQuickJoin: {
					leftTime: 10 * 60 * 1000,
					timeData: {
						hours: 0,
						minutes: 0,
						seconds: 0
					},
					exam: null
				},
				scrollList: [{
					'icon': '/static/icon/analysis.png',
					'text': '我的成绩',
					'bgColor': 'background: linear-gradient(219.93deg, rgba(254, 168, 42, 1) 0%, rgba(254, 129, 42, 1) 65.71%, rgba(254, 88, 42, 1) 100%)',
					'url': '/pages/examlist/finishedlist'
				}]
			}
		},
		onLoad() {
			_this = this;
			_this.saying = _this.sayings[Math.floor(_this.sayings.length * Math.random())];
			_this.hasNews = message.hasNewMessage();
			api.listenMessage((msg) => {
				if (msg.type == 'new_message') {
					_this.hasNews = true;
					_this.$forceUpdate();
				}
			});
			api.loadUserInfo(
				(user) => {
					_this.realname = api.user.realname;
					_this.avatar = api.user.avatar;
					_this.examLoaded = false;
					api.getSync('/api/exam/answering', {}, (res) => {
						if (res.code == 200) {
							_this.examQuickJoin.exam = res.data[0];
							if (_this.examQuickJoin.exam == undefined || _this.examQuickJoin.exam == null) {
								api.getSync('/api/exam/prestart', {}, (res2) => {
									if (res2.code == 200) {
										if (res2.data.length > 0) {
											_this.examPreStart.exam = res2.data[0];
											_this.examPreStart.leftTime = new Date(_this.examPreStart
												.exam.startTime).getTime() - new Date().getTime();
										}
									}
									_this.examLoaded = true;
								}, (err) => {
									_this.examLoaded = true;
								});
							} else {
								_this.examLoaded = true;
								_this.examQuickJoin.leftTime = new Date(_this.examQuickJoin.exam.endTime)
									.getTime() - new Date().getTime();
							}
						}
					}, (err) => {
						_this.examLoaded = true;
					});
				}, () => {

				});
		},
		onShow() {
			_this.hasNews = message.hasNewMessage();
		},
		onPullDownRefresh() {
			_this.saying = _this.sayings[Math.floor(_this.sayings.length * Math.random())];
			_this.hasNews = message.hasNewMessage();
			message.loadMessageList();
			api.loadUserInfo(
				(user) => {
					_this.realname = api.user.realname;
					_this.avatar = api.user.avatar;
				}, () => {
					uni.stopPullDownRefresh();
				});
		},
		methods: {
			onTimeChange(e) {
				_this.examQuickJoin.timeData = e;
				_this.examPreStart.timeData = e;
				if (e.days <= 0 && e.hours <= 0 && e.minutes <= 0 && e.seconds <= 0) {
					_this.examQuickJoin.exam = null;
					_this.examPreStart.exam = null;
				}
			},
			quickJoinExam: function() {
				uni.navigateTo({
					url: '../exam/exam?examId=' + _this.examQuickJoin.exam.id
				})
			},
			toExamListPage: function() {
				uni.redirectTo({
					url: '../examlist/examlist'
				})
			},
			toAccountPage: function() {
				if (api.isLoggedIn()) {
					uni.redirectTo({
						url: '../account/account'
					});
				} else {
					uni.navigateTo({
						url: '../login/login'
					});
				}
			},
			clickAvatar: function(e) {
				if (api.isLoggedIn()) {
					uni.navigateTo({
						url: '../message/message'
					});
				} else {
					_this.toAccountPage();
				}
			},
			clickBlock: function(e) {
				uni.navigateTo({
					url: e.url
				})
			},
			onTabPress: function(idx) {
				if (idx == 1) {
					uni.redirectTo({
						url: '../examlist/examlist'
					});
				} else if (idx == 2) {
					_this.toAccountPage();
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.header {
		position: relative;
		width: 100%;
		height: 396rpx;
		padding-top: var(--status-bar-height);
		background-color: $primary-color;

		#avatar {
			position: absolute;
			margin-top: 96rpx;
			margin-left: 600rpx;
		}

		#avatar-dot {
			position: absolute;
			top: calc(var(--status-bar-height) + 96rpx);
			left: 670rpx;
			z-index: 99;
		}

		#realname {
			color: white;
			font-size: 48rpx;
			font-weight: 500;
			font-family: 'YouYuan';
			padding-top: 120rpx;
			padding-left: 40rpx;
		}

		#saying {
			color: white;
			font-size: 28rpx;
			font-weight: 100;
			font-family: 'YouYuan';
			padding-top: 40rpx;
			padding-left: 40rpx;
		}

	}

	.info-board {
		position: relative;
		width: 670rpx;
		height: 192rpx;
		background: white;
		box-shadow: 0px 8px 12px rgba(184, 184, 210, 0.2);
		border-radius: 24rpx;
		margin-top: -96rpx;
		margin-left: 40rpx;
		z-index: 99;
		text-align: center;

		#exam-pre-start {
			position: relative;
			width: 100%;
			height: 100%;

			#title {
				position: absolute;
				font-size: 40rpx;
				font-weight: bold;
				font-family: 'YouYuan';
				top: 24rpx;
				left: 32rpx;
			}

			#join {
				position: absolute;
				font-size: 28rpx;
				right: 56rpx;
				margin-top: 26rpx;
				color: $primary-color;
			}

			#join-arrow {
				position: absolute;
				font-size: 28rpx;
				right: 24rpx;
				margin-top: 28rpx;
			}

			#icon {
				position: absolute;
				top: 102rpx;
				left: 385rpx;
			}

			#start-time {
				position: absolute;
				font-size: 40rpx;
				font-weight: bold;
				font-family: 'YouYuan';
				top: 94rpx;
				left: 36rpx;
				color: white;
				background: #ff6905;
				border-radius: 12rpx;
				padding: 9rpx;
			}

			#count-down {
				position: absolute;
				top: 48px;
				left: 440rpx;
				color: white;
				font-weight: 1000;

				#time {
					display: flex;
					flex-direction: row;

				}

				#time-slot {
					background: #4398ff;
					border-radius: 12rpx;
					padding: 8rpx;
				}

				#time-item {
					font-size: 32rpx;
				}

				#time-doc {
					padding: 0 8rpx;
					font-size: 32rpx;
					color: #4398ff;
				}
			}
		}

		#exam-quick-join {
			position: relative;
			width: 100%;
			height: 100%;

			#title {
				position: absolute;
				font-size: 40rpx;
				font-weight: bold;
				font-family: 'YouYuan';
				top: 120rpx;
				left: 32rpx;
			}

			#join {
				position: absolute;
				font-size: 28rpx;
				right: 56rpx;
				margin-top: 26rpx;
				color: $primary-color;
			}

			#join-arrow {
				position: absolute;
				font-size: 28rpx;
				right: 24rpx;
				margin-top: 28rpx;
			}

			#count-down {
				position: absolute;
				top: 12px;
				left: 36rpx;
				color: white;
				font-weight: 1000;

				#time {
					display: flex;
					flex-direction: row;

				}

				#time-slot {
					background: #4398ff;
					border-radius: 12rpx;
					padding: 8rpx;
				}

				#time-item {
					font-size: 32rpx;
				}

				#time-doc {
					padding: 0px 8rpx;
					font-size: 32rpx;
					color: #4398ff;
				}
			}
		}

		#exam-none {
			position: relative;
			width: 100%;
			height: 100%;
			display: flex;
			flex-direction: column;
			justify-content: center;

			#icon {
				position: absolute;
				left: 200rpx;
			}

			#text {
				position: absolute;
				font-size: 36rpx;
				left: 290rpx;
			}
		}
	}

	.scroll-list {
		margin-top: 40rpx;
		margin-left: 40rpx;
		width: 710rpx;
		height: 310rpx;

		#scroll-view {
			white-space: nowrap;

			#scroll-item {
				display: inline-block;
				width: 670rpx;
				height: 308rpx;
				box-shadow: 0px 0px 20px rgba(242, 246, 249, 0.4);
				border-radius: 16rpx;
				margin-right: 40rpx;
				opacity: 0.85;

				#item-content {
					display: flex;
					flex-direction: column;
					align-items: center;
					text-align: center;
					margin-top: 48rpx;

					text {
						color: white;
						font-family: 'YouYuan';
						margin-top: 16rpx;
					}
				}
			}

			#scroll-item:active {
				opacity: 1;
			}
		}
	}
</style>
